<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8" />
  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
  <meta http-equiv="X-UA-Compatible" content="ie=edge" />
  <title>登录</title>
  <link rel="stylesheet" href="./css/login.css" />
  <script src="./lib/jquery-1.12.2.js"></script>
  <!-- 需要使用引入第三方库进行md5加密 -->
  <script src="./lib/md5.min.js"></script>
</head>

<body>
  <form class="wraper">
    <div class="container">
      <div class="logo">
        <img class="icon" src="./images/logo.png" />
        <div class="title">英雄管理系统</div>
      </div>
      <div class="input-container">
        <div class="phone">
          <img class="icon" src="./images/phone.png" />
          <input placeholder="用户名" type="text" id="userName" name="userName" />
        </div>
        <div class="validate">
          <div class="code">
            <img class="icon" src="./images/mail.png" />
            <input placeholder="密码" type="password" id="userPwd" name="userPwd" />
          </div>
        </div>
      </div>
      <div id="tips"></div>
      <input type="submit" class="btn" value="登录" />
      <input type="button" class="btn register" value="注册" />
    </div>
  </form>

  <script>
    $(() => {
      // 1、前端登录
      $('form').on('submit', (e) => {
        // 阻止表单的默认行为
        e.preventDefault()
        // 收集表单的数据
        const userName = $('#userName').val().trim()
        const userPwd = $('#userPwd').val().trim()
        // console.log(userName,userPwd);

        // 发送请求
        $.ajax({
          type: 'post',
          url: 'http://localhost:3001/user/login',
          data: {
            userName: userName,
            userPwd: userPwd
          },
          success: (res) => {
            // console.log(res);
            if (res.code == 200) {
              // 登陆成功，把token进行本地存储
              localStorage.setItem('token', res.token)
              // 提醒用户
              alert(res.msg)
              // 跳转页面
              location.href = './index.html'
            }
            else {
              alert(res.msg)
            }
          }
        })
      })

      // 2、前端注册
      $('.register').on('click', function () {
        // 收集表单数据
        const userName = $('#userName').val().trim()
        const userPwd = $('#userPwd').val().trim()
        $.ajax({
          type: 'post',
          url: 'http://localhost:3001/user/register',
          data: {
            userName: userName,
            userPwd: userPwd
          },
          success: (res) => {
            // console.log(res);
            if (res.code == 200) {
              alert('恭喜你注册成功呀~')
            }
            else {
              alert(res.msg)
            }
          }
        })
      })

      //  前端捕获ajax错误
      $(document).ajaxError((event, request) => {
        // console.log('ajax运行出错时-后端返回 4xx  5xx 状态码');
        console.log(request);
        if (request.responseJSON) {
          alert(request.responseJSON.msg)
        }
      })
    })
  </script>
</body>

</html>